<template>
  <div class="detail_container">
    <div class="detail_box">
      <el-button plain icon="el-icon-back" @click="goBack">返回</el-button>
      <div class="img_detail">
        <div class="img">
          <div class="small">
            <img :src="imgs[imgIndex]" alt="" />
          </div>
          <div class="event" @mousemove="showBigImg"></div>
          <div class="mask" ref="mask"></div>
          <div class="big">
            <img :src="imgs[imgIndex]" alt="" ref="big" />
          </div>
          <div class="imgs">
            <div
              class="imgs_item"
              v-for="(item, index) in imgs"
              v-show="index < 5"
              @click="changeImgIndex(index)"
            >
              <img :src="item" alt="" />
            </div>
          </div>
        </div>
        <div class="detail">
          <div class="detail_item">
            <div class="title">
              {{ detailInfo.title }}
            </div>
            <p>{{ detailInfo.supplier }}</p>
            <div class="price">￥{{ detailInfo.priceStr }}</div>
            <div class="xing">***3.4</div>
            <el-button type="danger" @click="addShopCard"
              >添加到购物车</el-button
            >
          </div>
        </div>
      </div>
      <div class="remcommend">
        <div class="title">相似商品推荐</div>
        <div class="img_item">
          <div
            class="img"
            v-for="(item, index) in sameList"
            :key="item.Id"
            v-show="index < 4"
            @click="godetail(item.Id)"
          >
            <img :src="item.imageUrl" alt="" />
            <div class="title_item">{{ item.title }}</div>
            <div class="bottom">
              <div class="price">￥{{ item.priceStr }}</div>
              <div class="jx">精选</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <h1>底部不在做任何注释与样式的书写</h1>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Detail",
  props: [],
  data() {
    return {
      imgIndex: 0,
    };
  },
  created() {
    this.getDetailById();
  },
  computed: {
    ...mapState(["detailInfo", "sameList"]),
    //把字符串变为数组，然后使用
    imgs() {
      let img = JSON.parse(this.detailInfo.imgs || "[]");
      img.unshift(this.detailInfo.imageUrl);
      return img;
    },
  },
  watch: {
    $route() {
      this.$router.go(0);
    },
  },
  methods: {
    //根据id获取详情
    async getDetailById() {
      const res = await this.$store.dispatch(
        "getDetailById",
        this.$route.params.id
      );
      if (res !== 1) {
        this.$router.back();
        return this.$message.error("获取商品详情失败，自动跳转至上一页");
      }
      this.getSameList();
    },
    //获取同店商品推荐列表
    async getSameList() {
      this.$store.dispatch("getSameList", this.detailInfo.supplier);
    },
    // 鼠标进入显示放大镜
    showBigImg(event) {
      let mask = this.$refs.mask;
      let big = this.$refs.big;
      let left = event.offsetX - mask.offsetWidth / 2;
      let top = event.offsetY - mask.offsetHeight / 2;
      if (left < 0) left = 0;
      if (left > mask.offsetWidth) left = mask.offsetWidth;
      if (top < 0) top = 0;
      if (top > mask.offsetHeight) top = mask.offsetHeight;

      mask.style.top = top + "px";
      mask.style.left = left + "px";
      big.style.top = -2 * top + "px";
      big.style.left = -2 * left + "px";
    },
    //点击下面扩展图片，切换上面大图
    changeImgIndex(index) {
      this.imgIndex = index;
    },
    // 点击下面推荐，跳转，详情页面
    godetail(id) {
      this.$router.push({ name: "detail", params: { id } });
      scrollTo({
        top: 0,
      });
    },
    //点击返回，跳转首页
    goBack() {
      this.$router.push({ path: "/dashboard" });
    },
    //添加购物车
    async addShopCard() {
      const res = await this.$store.dispatch("addShopCard", this.detailInfo.Id);
      if (res.code === 1) this.$message.success("添加成功");
      else if (res.code === 0) this.$message.success("无效的token,请重新登录");
      else this.$message.success("添加成功");
    },
  },
};
</script>

<style lang="less" scoped>
.detail_container {
  width: 1000px;
  margin: 0 auto;
  .detail_box {
    .img_detail {
      display: flex;
      margin: 10px 0;
      .img {
        width: 500px;
        height: 600px;
        position: relative;
        .small {
          width: 500px;
          height: 500px;
          img {
            width: 100%;
            max-height: 100%;
          }
        }

        .imgs {
          display: flex;
          .imgs_item {
            width: 100px;
            height: 100px;
            padding: 5px;
            img {
              border: 1px solid #000;
              width: 100%;
            }
          }
        }
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 250px;
          height: 250px;
          z-index: 997;
          background-color: rgba(0, 0, 0, 0.1);
          display: none;
        }
        .big {
          position: absolute;
          top: -1px;
          left: 500px;
          border: 1px solid #aaa;
          z-index: 996;
          width: 500px;
          height: 500px;
          overflow: hidden;
          display: none;
          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
          }
        }
        .event {
          width: 100%;
          height: 500px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 998;

          &:hover ~ .big,
          &:hover ~ .mask {
            display: block;
          }
        }
      }
      .detail {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .detail_item {
          max-width: 95%;
          .title {
            max-width: 400px;
            font-size: 30px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 10px 0;
          }
          p {
            font-size: 20px;
            margin: 10px 0;
          }
          .price {
            font-size: 20px;
            font-weight: 900;
            color: red;
            margin: 10px 0;
          }
          .xing {
          }
          .el-button {
            margin: 10px 0;
            width: 200px;
            height: 50px;
            font-size: 20px;
          }
        }
      }
    }
  }
  .remcommend {
    .title {
      line-height: 30px;
      border-bottom: 1px solid #eee;
    }
    .img_item {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .img {
        width: 20%;
        height: 300px;
        border: 1px solid #000;
        margin: 10px;
        img {
          width: 100%;
          max-height: 200px;
        }
        .title_item {
          width: 100%;
          font-size: 20px;
          font-weight: 700;
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          .price {
            color: red;
            font-weight: 900;
          }
          .jx {
            background-color: rgb(185, 99, 185);
            color: #fff;
          }
        }
      }
    }
  }
  .footer {
    height: 500px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>